<template>
	<view class="page">
		<uni-forms ref="baseForm" class="mb100"  :modelValue="formData">
		<view class="group p30">
			<view class="onlyreadform">
			<uni-forms-item label="取货方式" name="orderType">
				<view class="pl20 pr10 flex flex-items-center flex-between fit-height">{{formData.orderType}}</view>
			</uni-forms-item>
			<uni-forms-item label="下单时间" name="orderTime">
				<view class="pl20 pr10 flex flex-items-center flex-between fit-height">{{formData.orderTime}}</view>
			</uni-forms-item>
			<uni-forms-item label="状态" name="status">
				<view class="pl20 pr10 flex flex-items-center flex-between fit-height">{{formData.status}}</view>
			</uni-forms-item>
			</view>
			<template v-if="formData.orderType == '外送'">
				<view class="inputgb">
					<uni-forms-item label="收货地址"  name="orderAddress">
						<view class="pl20 flex flex-items-center flex-between fit-height">
							<view class="fit-width" >
								<view>{{formData.orderAddress}}</view>
								<view>{{formData.orderPerson}} {{formData.orderPhone}}</view>
							</view>
						</view>
					</uni-forms-item>
				</view>
			</template>
			<template v-else-if="formData.orderType == '自提'">
				<view class="inputgb">
					<uni-forms-item label="商家地址" name="address">
						<view  class="pl20 pr10 flex flex-items-center flex-between fit-height">
							<view class="fit-width"  >
								<view>{{config.address}}</view>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="自提时间" name="orderPickUpTime">
						<view>{{formData.orderPickUpTime}}</view>
					</uni-forms-item>
					<uni-forms-item label="联系方式" name="orderPhone">
						<view>{{formData.orderPhone}}</view>
					</uni-forms-item>
				</view>
			</template>
			<template v-else>
				<view class="inputgb">
					<uni-forms-item label="取货点" name="addressPoint">
						<view>{{formData.addressPoint}}</view>
					</uni-forms-item>
					<uni-forms-item label="联系方式" name="orderPhone">
						<view>{{formData.orderPhone}}</view>
					</uni-forms-item>
				</view>
			</template>
		</view>
		<view  class="group p30">
			<view class="f40 blod mb30">共 {{formData.totalNumber}} 件商品</view>
			<productItem v-for="(item, i) in dataList" :item="item" :key="i"></productItem>
			<template v-if="goodsList.length > 3">
				<view  class="fit-width flex flex-items-center flex-center" v-if="!showMore" @click="showMore = true">
					<text class="f30">展示更多</text>
					<uni-icons type="down" size="20"></uni-icons>
				</view>
				<view class="fit-width flex flex-items-center flex-center" v-else @click="showMore = false">
					<text class="f30">收起更多</text>
					<uni-icons type="up" size="20"></uni-icons>
				</view>
			</template>
			<view class="vrow flex-between" v-if="formData.orderType == '外送'">
				<text>配送费 </text>
				<text class="f40 blod">¥{{formData.deliveryFee}}</text>
			</view>
			<view class="line"></view>
			<view class="flex flex-items-center flex-end mb50">
				<text class="f30">合计</text>
				<text class="ml10 f40 blod">¥{{formData.totalAmount}}</text>
			</view>
			<view class="inputgb">
			<uni-forms-item label="备注">
				<view>{{formData.remarks}}</view>
			</uni-forms-item>
			</view>
		</view>
		</uni-forms>
	</view>
</template>

<script>
import { baseUrl } from '../common/js/http'
import productItem from '../pay/item.vue'
	import {
		SelectListOrderItem
	} from '@/pages/common/api.js'
	export default {
		components: {productItem},
		data () {
			return {
				showMore: false,
				formData: {},
				config: {},
				goodsList: []
			}
		},
		computed: {
			dataList () {
				if (this.showMore) {
					return this.goodsList
				} else {
					return this.goodsList.slice(0, 3)
				}
			}
		},
		onLoad(options) {
			if (options.data) {
				let data = JSON.parse(decodeURIComponent(options.data))
				this.formData = Object.assign({}, data)
			}
			let config = uni.getStorageSync('config')
			console.log('config', config)
			this.config = config
			this.loadData()
		},
		methods: {
			loadData () {
				let basePath = baseUrl()
				SelectListOrderItem({
					orderId: this.formData.orderId
				}).then(res => {
					if (res.code === 20000) {
						this.goodsList = res.data.map(d => {
							return {
								name: d.productName,
								image:  `${basePath}/open-api/product/img?refId=${d.productId}`,
								selected: d.quantity,
								price: d.unitPrice
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 10rpx 20rpx;
		background-color: #f1f2f3;
	}
	.group {
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}
	.untoradius {
		border-top-right-radius: 0px;
		border-top-left-radius: 0px;
	}
	::v-deep {
		.items {
			flex: 1;
			text-align: center;
			line-height: 80rpx;
			.active {
				background-color: #fff;
				border-top-right-radius: 10rpx;
				border-top-left-radius: 10rpx;
			}
		}
	}
	.onlyreadform {
		::v-deep {
			.uni-forms-item__inner {
				position: relative;
				padding-bottom: 0px;
				padding: 20rpx;
			}
		}
	}
	.inputgb {
		background-color: #f1f2f3;
		padding: 0 20rpx;
		border-radius: 10rpx;
		width: 100%;
		::v-deep {
			.uni-forms-item__label {
				width: 100px;
				font-weight: 500;
				color: #333;
				.label-text {
					color: #333;
				}
			}
			.uni-forms-item__content {
				display: flex;
				align-items: center;
			}
			.uni-forms-item__inner {
				position: relative;
				padding-bottom: 0px;
				padding: 20rpx;
			}
			uni-forms-item:not(:last-child), .uni-forms-item:not(:last-child) {
				.uni-forms-item__inner::after{
					position: absolute;
					content: "";
					right: 20rpx;
					left: 20rpx;
					height: 1rpx;
					bottom: 0px;
					background-color: #fff;
				}
			}
		}
	}
</style>